import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import echarts from 'echarts'

class LeftTTopTU extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            disList: {}
        }

    }


    componentWillReceiveProps() {
        
        setTimeout(() => {
            console.log(this.props)
            this.onsave()
        },1000)
      
    }
    onsave = () => {

        request({
            url: `/zhrq-web/patrol/patroltask/getFromData2`,
            method: 'post',
            data:{...this.props}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    disList: data.ret.task
                })
            }
        })
    }



    setOption = () => {
        let data = this.state.disList
        return {
            backgroundColor: '#FFF',

            grid: {
                top: "10%",
                left: '3%',
                right: '1%',
                bottom: '3%',
                containLabel: true
            },

            tooltip: {
                show: "true",
                trigger: 'axis',
                formatter: '{b0}: {c0}',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                position: "top",
                type: 'value',
                name: "(个)",
                axisTick: { show: false },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#000',
                    }
                },
                splitLine: {
                    show: false
                },
            },
            yAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#000',
                        }
                    },
                    data: data.timeList
                },
                {
                    type: 'category',
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { show: false },
                    splitArea: { show: false },
                    splitLine: { show: false },
                    data: data.timeList
                },

            ],
            series: [
                {
                  
                    type: 'bar',
                    yAxisIndex: 1,

                    itemStyle: {
                        normal: {
                            show: true,
                            color: '#6fc6ff2b',
                            // barBorderRadius:50,
                            borderWidth: 0,
                            borderColor: '#333',
                        }
                    },
                    barGap: '0%',
                    barCategoryGap: '50%',
                    data: data.background
                },
                {
                    name: '钥匙量',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            show: true,
                            color: '#6FC6FF',
                            // barBorderRadius:50,
                            borderWidth: 0,
                            borderColor: '#333',
                        }
                    },
                    barGap: '0%',
                    barCategoryGap: '50%',
                    data: data.data
                }

            ]
        };



    }

    render() {

        return (

            <Chart option={this.setOption()} notMerge lazyUpdate style={{ height: "26vh",marginTop:"0.5vh" }}
                echartsInstance={this.save}
            />




        );
    }

}

export default LeftTTopTU;
